<template>
  <div>
    <nav-bar title="材料出库"></nav-bar>
    <div class="maxinBox" v-if="materialDetails">
      <van-row>
        <van-col :span="24" class="title">
          <div>
            材料信息
          </div>
        </van-col>
      </van-row>
      <van-cell title="材料名称" :value="materialDetails.name || '--'"/>
      <van-cell title="材料编号" :value="materialDetails.num || '--'"/>
      <van-cell title="型号规格" :value="materialDetails.model || '--'"/>
      <van-cell title="品牌" :value="materialDetails.brand || '--'"/>
      <van-row>
        <van-col :span="24" class="title">
          <div>
            库存信息
          </div>
        </van-col>
      </van-row>
      <van-cell title="库存数量" :value="materialDetails.inventory || '--'"/>
      <van-cell title="单位" :value="materialDetails.unit || '--'"/>
      <van-cell title="累计入库" :value="materialDetails.inStorage || '--'"/>
      <van-cell title="累计出库" :value="materialDetails.outStorage || '--'"/>
      <van-cell title="库存状态" v-if="materialDetails.status" value="库存正常" />
      <van-cell title="库存状态" v-else value="库存告警" />
      <van-row>
        <van-col :span="24" class="title">
          <div>
            出库
          </div>
        </van-col>
      </van-row>
      <van-cell required title="出库日期" @click="onOutbound" is-link :value="form.outboundDate" />
      <van-popup v-model="showOutbound" position="bottom" style="height: 40%">
        <van-datetime-picker
          v-model="currentDate"
          @confirm="outboundConfirm"
          @cancel="showOutbound = false"
          type="date"
          title="请选择出库日期"
          :min-date="violateMinDate"
          :max-date="violateMaxDate"
        />
      </van-popup>
      <van-field
        required
        v-model="form.num"
        name="出库数量"
        label="出库数量"
        placeholder="请输入出库数量"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" @click="onSubmit">
          提交
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    data() {
      return {
        form: {
          outboundDate: '',
          num: ''
        },
        currentDate: new Date(),
        violateMinDate: new Date(2000, 0, 1),
        violateMaxDate: moment(new Date()).add(1,'days')._d,
        showOutbound: false,
        materialDetails: {
          name: '一期工地建筑水泥',
          num: 'QR34642134P',
          model: '325#',
          brand: '永固',
          inventory: '235吨',
          unit: '吨',
          inStorage: '5436吨',
          outStorage: '4572吨',
          status: 0
        }
      }
    },
    methods: {
      // 选择出库日期
      onOutbound() {
        this.showOutbound = true
      },
      // 出库日期选择确定按钮
      outboundConfirm(val) {
       this.form.outboundDate = moment(val).format('YYYY-MM-DD')
       this.showOutbound = false
      },
      onSubmit() {
        this.$toast('提交成功')
      },
    },
    mounted() {

    }
  }
</script>
<style scoped lang="scss">
.title{
    padding: 0.625rem;
    font-size: 0.875rem;
    div{
      margin: 0.3125rem;
      border-left: 0.125rem solid #1577FF;
      padding-left: 0.3125rem;
    }
  }
</style>
